<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>each-基础循环的使用方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css file  -->
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->


    <!-- js file -->
    <script type="text/javascript" src="../script/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../script/handlebars-v4.0.12.js"></script>

    <style type="text/css">
        .card {
            font-size: 30px;
            float: left;
            margin: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
<script type="text/x-handlebars-template" id="card-template">
    {{#each this}}
        <div class="card" id="card">
            <div>{{chinese @index}}</div>
            <div>姓名: {{name}}</div>
            {{#if birth}}
            <div>出生日期：{{birth}}</div>
            {{/if}}
            <div>出生地： {{home}}</div>    
            <div>职业： {{job}}</div>
            <ul>
                {{#each books}}
                    <li {{#isFirst @index}} style="color:red;" {{/isFirst}}
                    {{!-- 这里是注释  {{#isBlue ../books}} style="color: blue;" {{/isBlue}}  --}}    
                        {{#if ../blue}} style="color: blue" {{/if}}
                    >
                        {{addOne @../index}}-{{addOne @index}} {{this}}
                    </li>
                {{/each}}
            </ul>
        </div>
    
    {{/each}}
</script>

<div class="" id="cardBox">

</div>
<!-- 
需求
    1 卡片上增加中文序号
    2 书籍前面增加数字序号，格式为卡片序号-书籍序号
    3 第一本书籍用红色表示
    4 如果一个人有超过两本书，那么除了第一本书之外，其余显示为蓝色


 -->

<script type="text/javascript">
    $(function(){
        var data = [{
            name: '凯文米特尼克',
            birth: '1963-8-6',
            home: '美国洛杉矶',
            job: '网络工程师',
            books: [
                '《欺骗的艺术》',
                '《入侵的艺术》',
            ]
        },{
            name: '沃茨尼亚克',
            birth: '1950-8-11',
            home: '美国加州福尼亚',
            job: '电脑工程师',
            books: [
                '《与苹果一起疯狂》',
            ]
        },
        {
            name: '乔布斯',
            birth: '',
            home: '美国加州福尼亚',
            job: '苹果研发师',
        }
        
        
        ];
        Handlebars.registerHelper('chinese',function(value){
            var arr = ['一','二','三'];
            if(this.books && this.books.length >= 2) {
                this.blue = 1;
            }
            return arr[value];
        });
        Handlebars.registerHelper('addOne',function(value) {
            return value+1;
        });

        Handlebars.registerHelper('isFirst',function(value,options) {
            if(value === 0) {
                return options.fn(this);
            }
        });


        //                <!-- {{#isBlue ../books}} style="color: blue;" {{/isBlue}} -->
        // Handlebars.registerHelper('isBlue',function(value,options) {
        //     // console.log(value);
        //     if(value && value.length >= 2) {
        //         return options.fn(this);
        //     }
        // });

        var tempHtml = $('#card-template').html(),
            myHandlebars = Handlebars.compile(tempHtml);
        $('#cardBox').html(myHandlebars(data));

    })
</script>



</body>
</html>